<template>
  <div>
    <el-upload class="el-upload-style"
               :class="{ active: state.fileLength == state.maxFileLength, mright: state.mRight }" :action="state.baseUrl"
               list-type="picture-card" :limit="state.limits" :on-exceed="onExceed" :data="state.uploadData"
               :on-progress="beforeUpload" :on-success="handleuploadSuccess" multiple>
      <template #default>
        <div class="content-img-default">
          <div class="icon-default">
            <div class="icon-default-teo-img">
              <el-icon>
                <Plus/>
              </el-icon>
            </div>
            <div class="icon-default-teo-text">
              {{ state.uploadTitle }}{{ state.fileLength }}/{{ state.maxFileLength }}</div>
          </div>
        </div>
      </template>
      <template #file="{ file }">
        <div class="content-img">
          <el-image class="el-upload-list__item-thumbnail" style="width: 100%;" :src="file.url" fit="contain"></el-image>
        </div>
      </template>
    </el-upload>
  </div>
<!--  <el-upload action="#"
             list-type="picture-card"
             :auto-upload="false"
             :on-success="handleuploadSuccess"
             :on-exceed="onExceed"
             :on-progress="beforeUpload"

  >
    <el-icon>
      <Plus/>
    </el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
        <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in/></el-icon>
          </span>
          <span
              v-if="!this.disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
          >
            <el-icon><Download/></el-icon>
          </span>
          <span
              v-if="!this.disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete/></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="this.dialogVisible">
    <img w-full :src="this.dialogImageUrl" alt="Preview Image"/>
  </el-dialog>-->
</template>

<script >

import {ElMessage} from "element-plus";

export default {
  name: "uploadImage",
  data() {
    return {

      state:{
        maxFileLength: 3,
        uploadData: {},
        uploadTitle: "",
        limits: 3,
        mRight: false,
        uploadIcon: "",

        imgUrl: "",
        baseUrl:  "upload/admin/file/image",
        dialogImageUrl: "",
        dialogVisible: false,
        disabled: false,
        fileLength: 0,
      },
    }
  },
  methods: {
    handleRemove(file){
      console.log(file)

    },
    handlePictureCardPreview(file){
      this.state.dialogImageUrl = file.url
      this.state.dialogVisible = true

    },
    handleDownload(file){
      // console.log(file)

    },
    beforeUpload(event, file, fileList) {
      // console.log(event)
      // console.log(file)
      // console.log(fileList)
    },
    handleuploadSuccess(response, file, fileList){
      this.state.fileLength = fileList.length;
      this.$emit("uploadSuccess", response.data);

    },

    onExceed(files, fileList){
      console.log("文件超出个数限制时的钩子", files);
      console.log("文件超出个数限制时的钩子", fileList);
      ElMessage.error({
        message: "图片超出个数",
        type: "error"
      });
    },
  },
}

</script>
<style scoped lang="less">
.el-upload-list__item-thumbnail {
  height: 180px;
}

.content-img-default {
  width: 100%;
  border: 1px dashed #C0CCDA;
  border-radius: 10px;

  .icon-default {
    width: 100%;
    height: 180px;
  }

  .icon-default-teo-img {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 90px;
      height: 90px;
    }
  }

  .icon-default-teo-text {
    color: #808080;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0px;
  }
}

::v-deep(.active .el-upload) {
  display: none !important;
}

::v-deep(.mright .el-upload-list li) {
  margin-right: 20px !important;
}

// 修改element-ui样式
.el-upload-style {
  // display: flex;
  // box-sizing: border-box;
  // flex-wrap: wrap;
  margin-bottom: 20px;
}

::v-deep(.el-upload-style .el-upload-list) {
  // display: flex;
  // flex-wrap: wrap;
}

::v-deep(.el-upload-style .el-upload-list li) {
  margin-right: 20px;
}

::v-deep(.el-upload-style .el-upload-list .el-upload-list__item) {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0px 4px 10px 0px rgba(4, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px;
  // display: flex;
  // justify-content: center;
  // align-items: center;
}

::v-deep(.el-upload-style .el-upload) {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0px 4px 10px 0px rgba(4, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  border: none;
  box-sizing: border-box;
}

::v-deep(.el-upload-style .el-upload i) {
  font-size: 90px;
  border: 1px dashed #d9d9d9;
  color: #8c939d;
  // padding: 44px;
  border-radius: 10px;
  background: #fbfdff;
}

// --------

.el-upload {
  background: #fbfdff;
}

.upload-img {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;

  .upload-text {
    // width: 100%;
    // text-align: center;
    font-size: 18px;
    font-family: FZHei-B01S;
    font-weight: 400;
    color: #808080;
  }

  .content {
    box-sizing: border-box;

    .upload-first {
      .icon {
        width: 100%;
        height: 100%;
        border: 1px dashed #c0ccda;
        background: #fbfdff;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.icon-style-first {
  font-size: 160px;
  color: #929292;
}

.upload-text {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-family: FZHei-B01S;
  font-weight: 400;
  color: #808080;
}

.el-loading-spinner {
  //loading位置
  margin-top: -44%;
}

.portal-main-common.g-main-upload {
  width: 178px;
  height: 178px;
  line-height: 178px;

  .avatar-uploader {
    width: 100%;
    height: 100%;
  }

  .el-upload {
    width: 100%;
    height: 100%;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 100%;
    line-height: 100%;
    text-align: center;
  }

  .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
}

</style>
